<template>
    <header-inner :max-width="798" :min-width="568">
        <div class="editor-header">
            <h1>写文章</h1>
            <user-head
                :follow="false"
                popover-width="100"
                :show-arrow="false"
                :label-options="userHeadOptions">
            </user-head>
        </div>
    </header-inner>
    <div class="editor-main">
        <cutCoverImage></cutCoverImage>
        <!-- <el-upload class="editor-upload" drag :show-file-list="false" action="">
            <i class="icon icon-img-add"></i>
        </el-upload> -->
        <div class="editor-title">
            <el-input class="title-input" placeholder="请输入标题" v-model="title"></el-input>
        </div>
        <RouterView></RouterView>
    </div>
</template>

<!-- 裁剪插件 https://www.ihtmlcss.com/demo/dist/#/croptool -->

<script lang="ts" setup>
import { ref } from 'vue'
import cutCoverImage from '@/components/create-article/cut-coverImage.vue'
import headerInner from '../components/common/header-inner.vue'
import userHead from '../components/common/user-head.vue'
import { userHeadOptions } from '../components/editor/user-headerOptions'
const title = ref<string>('')
</script>

<style lang="less" scoped>
.editor-header {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;

    h1 {
        font-size: var(--font-size-large-x);
        color: var(--color-text-s);
        margin-left: 15px;
    }
}

.editor-main {
    max-width: 710px;
    min-width: 568px;
    margin: 0 auto;
    padding-top: 72px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    height: calc(100% - 72px);
    height: 100%;
    box-sizing: border-box;
    .scrollbar-none;
    .editor-title {
        padding: 30px 0;
        background-color: var(--color-background);
        .title-input {
            height: 48px;            
            :deep(.el-input__wrapper) {
                box-shadow: none;
                font-size: 28px;
                background-color: var(--color-background);
            }
        }
    }
}
</style>
